import React, { Component } from 'react'
import { NavBar } from "antd-mobile"
// import empty from "../../assets/images/empty.jpg"
import empty from "../../assets/images/timg.jpg"
import "./Cart.css"
export default class Cart extends Component {
    state = {
        carts: []
    }
    componentDidMount() {
        let carts_str = localStorage.getItem("carts")
        let carts = JSON.parse(carts_str || "[]")
        this.setState({
            carts
        })
    }
    render() {
        return (
            <div className="Cart">
                {/* 购物车导航开始 */}
                <div className="Cart-nav">
                    <NavBar className="nav">购物车</NavBar>
                </div>
                {/* 购物车导航结束 */}
                {/* 购物车列表开始 */}
                {
                    !!this.state.carts.length ? (
                        <div className="content">
                            {/* 购物列表开始 */}
                            <div className="content-list">
                                {this.state.carts.map((v, index) => {
                                    return (
                                        <div className="list-item" key={v.goods_id}>
                                            <div className="item-left">
                                                <i className="iconfont icon-shanchu-xuanzhong"></i>
                                            </div>
                                            <div className="item-content">
                                                <img src={v.goods_small_logo} alt="" />
                                            </div>
                                            <div className="item-right">
                                                <div className="right-title">{v.goods_name}</div>
                                                <div className="right-bottom">
                                                    <div className="bottom-left">
                                                        ¥{v.goods_price}
                                                    </div>
                                                    <div className="bottom-right">
                                                        <i className="iconfont icon-iconset0187"></i>
                                                        <span className="right-text">{v.num}</span>
                                                        <i className="iconfont icon-icon-"></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    )
                                })}
                                {/* 购物列表结束 */}
                                {/*  底部结算栏开始 */}
                                <div className="content-bottom">
                                    <div className="bottom-checked">
                                        <i className="iconfont icon-shanchu-xuanzhong circle"></i>
                                        <span className="checked-text">全选</span>
                                    </div>
                                    <div className="totalPrice">
                                        <span className="totalPrice-total">合计：</span>
                                        <span className="totalPrice-price">¥3199</span>
                                    </div>
                                    <div className="settlement">
                                        <span className="settlement-settlement">去结算</span>
                                    </div>
                                </div>
                                {/*  底部结算栏结算 */}
                            </div>
                        </div>
                    ) :
                        <div className="cart-empty">
                            <img src={empty} alt="" className="empty-img" />
                            <h2 className="empty-text">憨憨的购物车已经被清空，快去购物吧！</h2>
                            <h3 className="empty-text"><a href="#/category">去逛逛</a></h3>
                        </div>
                }
            </div>
        )
    }
}
